<!--
 * @Description: ...
 * @Author: yangli 121029539@qq.com
 * @Date: 2025-02-06 11:23:56
 * @LastEditTime: 2025-02-13 14:47:55
 * @LastEditors: yangli 121029539@qq.com
 * @FilePath: \uniapp\src\pagesrepair\expressnum.vue
-->
<template>
    <view class="bg-page min-h-screen pt-[10px]">
        <view class="w-full">
            <u-form :model="state.formData" :label-width="180" ref="form1" :borderBottom="false">
                <u-form-item class="right-item" prop="express_type" label="选择快递" required>
                    <u-input
                        class="flex-1"
                        v-model="state.formData.express_type"
                        :border="false"
                        placeholder="请选择"
                        type="select"
                        @click="showType"
                    />
                </u-form-item>
                <u-form-item class="right-item" prop="express_num" label="输入快递号" required>
                    <u-input
                        class="flex-1"
                        v-model="state.formData.express_num"
                        :border="false"
                        placeholder="请输入快递单号"
                        type="text"
                    />
                </u-form-item>
                <view class="gap h-[10px] bg-page"></view>
                <view class="pt-[32rpx] bg-white">
                    <view class="text-[36rpx] mb-[20rpx] pl-[32rpx]">回寄地址</view>
                    <u-form-item class="right-item" prop="user_name" label="姓名" required>
                        <u-input
                            class="flex-1"
                            v-model="state.formData.user_name"
                            :border="false"
                            placeholder="请输入姓名"
                            type="text"
                        />
                    </u-form-item>
                    <u-form-item class="right-item" prop="user_phone" label="电话" required>
                        <u-input
                            class="flex-1"
                            v-model="state.formData.user_phone"
                            :border="false"
                            placeholder="请输入电话号码"
                            type="text"
                        />
                    </u-form-item>
                    <u-form-item class="right-item" prop="user_address" label="省市区" required>
                        <u-input
                            class="flex-1"
                            v-model="state.formData.user_address"
                            :border="false"
                            placeholder="请选择省市区"
                            type="select"
                            @click="showArea"
                        />
                    </u-form-item>
                    <u-form-item label="具体地址" prop="user_detail" required label-position="top">
                        <u-input
                            class="flex-1 mb-[32rpx]"
                            type="textarea"
                            :height="200"
                            v-model="state.formData.user_detail"
                            :border="true"
                            placeholder="请输入具体地址"
                        />
                    </u-form-item>
                </view>
            </u-form>
            <view class="py-[60rpx] px-[48rpx]">
                <u-button @tap="toSubmit" type="primary">提交</u-button>
            </view>
        </view>

        <u-select
            @confirm="onConfirm"
            @cancel="showSelectPop = false"
            v-model="showSelectPop"
            :list="expressList"
        ></u-select>
        <u-picker
            @confirm="onAreaConfirm"
            @cancel="showAreaPop = false"
            v-model="showAreaPop"
            mode="region"
            :params="{
                province: true,
                city: true,
                area: true
            }"
            :safe-area-inset-bottom="true"
        ></u-picker>
    </view>
</template>

<script setup lang="ts">
import { fitEpress, deliveryList } from '@/api/repair'
import { onLoad, onShow, onReady } from '@dcloudio/uni-app'
import { computed, reactive, ref, shallowRef } from 'vue'
import { useAppStore } from '@/stores/app'
import { useUserStore } from '@/stores/user'

const form1 = ref()

const showSelectPop = ref<boolean | null>(false)
const showAreaPop = ref<boolean | null>(false)

const appStore = useAppStore()
const userStore = useUserStore()
const token = computed(() => userStore.token)

const state = reactive({
    repairId: '',
    formData: {
        express_type: '',
        express_id: '',
        express_num: '',
        user_name: '',
        user_phone: '',
        user_address: '',
        user_code: '',
        user_detail: ''
    },
    rules: {
        express_type: [
            {
                required: true,
                message: '请选择',
                // 可以单个或者同时写两个触发验证方式
                trigger: ['change', 'blur']
            }
        ],
        express_num: [
            {
                required: true,
                message: '请输入',
                trigger: 'blur'
            }
        ],
        user_name: [
            {
                required: true,
                message: '请输入',
                trigger: 'blur'
            }
        ],
        user_phone: [
            {
                required: true,
                message: '请输入手机号',
                trigger: ['change', 'blur']
            },
            {
                validator: (rule: any, value: any, callback: any) => {
                    return uni.$u.test.mobile(value)
                },
                message: '手机号码不正确',
                // 触发器可以同时用blur和change，二者之间用英文逗号隔开
                trigger: ['change', 'blur']
            }
        ],
        user_address: [
            {
                required: true,
                message: '请选择',
                trigger: ['change', 'blur']
            }
        ],
        user_detail: [
            {
                required: true,
                message: '请输入',
                trigger: 'blur'
            }
        ]
    }
})

const expressList = ref([])

onReady(() => {
    form1.value.setRules(state.rules)
})

const toSubmit = async () => {
    form1.value.validate((valid: boolean) => {
        if (valid) {
            submitPostData()
        } else {
            uni.$u.toast('请确保输入信息完整!')
        }
    })
}
const submitPostData = async () => {
    let postData = {
        repair_id: state.repairId,
        express_no: state.formData.express_num,
        express_type: state.formData.express_type,
        receive_address: state.formData.user_address,
        receive_concate_name: state.formData.user_name,
        receive_concate_phone: state.formData.user_phone
    }
    const resData = await fitEpress(postData)
    uni.$u.toast('提交成功')
    setTimeout(() => {
        uni.redirectTo({
            url: `/pagesrepair/repairdetail?id=${state.repairId}`
        })
    }, 2000)
}

const onConfirm = (item: any) => {
    console.log('onConfirm', item[0])
    state.formData.express_type = item[0].label
    state.formData.express_id = item[0].value
}
const onAreaConfirm = (item: any) => {
    console.log('onAreaConfirm', item)
    state.formData.user_address = `${item.province.name}${item.city.name}${item.area.name}`
    state.formData.user_code = `${item.province.code}${item.city.code}${item.area.code}`
}

function showType() {
    showSelectPop.value = true
}
function showArea() {
    showAreaPop.value = true
}
// 物流选择
const init = async () => {
    const res = await deliveryList()
    expressList.value = res.map((item: any) => ({
        label: item.delivery_name,
        value: item.delivery_id
    }))
}

onShow(() => {
    init()
})

onLoad((options: any) => {
    console.log('options.pageData', options)
    state.repairId = options?.repairId || 0
})
</script>

<style lang="scss" scoped>
:deep(.u-form-item) {
    background: white;
    padding: 16rpx 32rpx !important;
    /* border-radius: 20rpx; */
    /* margin-bottom: 20rpx; */
}

.right-item {
    :deep(.u-form-item) {
        .u-input {
            text-align: right !important;
        }

        .u-form-item__message {
            text-align: right !important;
        }
    }
}
</style>
